import React from "react";
import {
  HiChatBubbleLeftRight,
  HiUserGroup,
  HiSquares2X2,
  HiUserCircle,
} from "react-icons/hi2";

type TabName = "chat" | "contact" | "discover" | "me";

interface TabBarProps {
  activeTab: TabName;
  onTabChange: (tab: TabName) => void;
}

const TabBar: React.FC<TabBarProps> = ({ activeTab, onTabChange }) => {
  const tabs = [
    {
      id: "chat",
      name: "微信",
      icon: <HiChatBubbleLeftRight className="text-xl" />,
    },
    {
      id: "contact",
      name: "通讯录",
      icon: <HiUserGroup className="text-xl" />,
    },
    {
      id: "discover",
      name: "发现",
      icon: <HiSquares2X2 className="text-xl" />,
    },
    { id: "me", name: "我", icon: <HiUserCircle className="text-xl" /> },
  ];

  return (
    <div className="btm-nav bg-white border-t border-gray-200">
      {tabs.map((tab) => (
        <button
          key={tab.id}
          className={`flex-1 flex-col py-2 ${
            activeTab === tab.id ? "text-green-500" : "text-gray-500"
          }`}
          onClick={() => onTabChange(tab.id as TabName)}
        >
          <div className="flex justify-center">{tab.icon}</div>
          <span className="btm-nav-label text-xs mt-1">{tab.name}</span>
        </button>
      ))}
    </div>
  );
};

export default TabBar;
